<template>
  <div v-show="$store.state.loginIsShow">
    <div class="model-bg" @click="closeLogin"></div>
    <div class="model-box">
      <img
        src="../assets/images/login/userArrow.png"
        alt=""
        @click="closeLogin"
      />
      <section class="tanxin">
        <span :class="{ 'active': telephoneOrWx === 1}" @click="telephoneOrWx = 1">手机号码登录</span> |
        <span :class="{ 'active': telephoneOrWx === 0}" @click="wxClick">微信扫码登录</span>
      </section>
      <div v-show="telephoneOrWx === 1" class="phone">
        <div class="user">
          <input
            type="text"
            placeholder="请输入手机号"
            v-model.trim="phoneNumbers"
          />
        </div>
        <!-- 滑块 -->
        <div class="tanxin">
          <slide-verify
            class="huakuai"
            :l="42"
            :r="10"
            :w="360"
            :h="155"
            slider-text="向右滑动"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
          ></slide-verify>
          <!-- <div>{{msg}}</div> -->
        </div>
        <p :style="{ color: yanZhengColor }">{{ msg }}</p>
        <!-- 滑块 -->
        <div class="yanzhengma">
          <input
            type="text"
            placeholder="请输入验证码"
            v-model.trim="myYanZhengMa"
          />
          <button
            @click="yanZhengMaClickFn"
            :style="{
              background:
                getYanZhengMaNumbers !== '获取验证码' ? '#333' : '#0A328E',
            }"
          >
            {{ getYanZhengMaNumbers }}
          </button>
        </div>
        <div class="login">
          <button @click="loginClick">登录</button>
        </div>
      </div>
      <div v-show="telephoneOrWx === 0" id="weixin">
        <!-- 存放微信的图片 -->
      </div>
    </div>
    <transition name="fade">
      <TanChuang :msgees="err" :icon="icon"/>
    </transition>
    
  </div>
</template>

<script>
import TanChuang from "./baseTaost.vue";
import { sendSms , phoneRegin ,wechatUsersBinding } from "@/request/Api";
export default {
  data() {
    return {
      msg: "滑动验证",
      yanZhengColor: "red",
      phoneNumbers: "17321943136",
      getYanZhengMaNumbers: "获取验证码",
      err: "",
      // 正则表达式 验证手机号
      telephone: /^1[345678][0-9]{9}$/,
      // 用户输入的验证码
      myYanZhengMa: "",
      // 手机登录是微信登录 1是手机,0是微信
      telephoneOrWx:1,
      icon : '',
      imgSrc :require('@/assets/images/home/wx.png')  
    };
  },
  methods: {
    wxClick(){
      // 点击扫码登录会请求一个二维码 这时候用户有2个选择  登录或者不登录
      // 扫码重定向到此路径 然后我们直接在header中做判断  判断这个路径是否携带了参数
      // 这个参数就是返回的目标参数 code  采用$route.query.code获取
      this.telephoneOrWx = 0
      let _this = this;
      new WxLogin({
        id: "weixin",
        appid: "wx67cfaf9e3ad31a0d",  // 这个appid要填死
        scope: "snsapi_login",
        // 扫码成功后重定向的接口
        redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
        // state填写编码后的url
        state: encodeURIComponent(window.btoa(process.env.VUE_APP_STATE_URL + _this.$route.path)),
        // 调用样式文件
        href: "data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlLCAuaW1wb3dlckJveCAuaW5mb3sNCiAgICBkaXNwbGF5OiBub25lOw0KfQ0KDQouaW1wb3dlckJveCAucXJjb2Rlew0KICAgIG1hcmdpbi10b3A6IDIwcHg7DQp9",
      });
    },
    //  @click="hdClick"
    // 事件监听!!!!  监听事件参数e!!!!
    // hdClick:(e)=>{
    //     console.log(e);
    // }
    closeLogin() {
      this.$store.commit("changeLoginIsShow", false);
    },
    onSuccess() {
      this.msg = "验证成功!";
      this.yanZhengColor = "green";
    },
    onFail() {
      this.msg = "验证失败!请重试";
      this.yanZhengColor = "red";
    },
    onRefresh() {
      this.msg = "重新验证!";
      this.yanZhengColor = "red";
    },
    yanZhengMaClickFn() {
      if (this.phoneNumbers === "") {
        this.$store.commit("changeInfoWindow", true);
        this.err = "请输入电话号码!!";
        this.icon = "icon-toast-jinggao"
        return;
      }
      // if (this.phoneNumbers.length < 11) {
      // 正则.test()匹配,判断是否匹配成功
      if (!this.telephone.test(this.phoneNumbers)) {
        this.$store.commit("changeInfoWindow", true);
        this.err = "请输入正确的电话号码!!";
        this.icon = "icon-toast-jinggao"
        return;
      }
      if (this.msg !== "验证成功!") {
        this.$store.commit("changeInfoWindow", true);
        this.err = "请正确验证图片!!";
        this.icon = "icon-toast-jinggao"
        return;
      }
      if (this.getYanZhengMaNumbers !== "获取验证码") {
        return;
      }
      // 发送短信验证码至手机
      sendSms({ phone: this.phoneNumbers }).then(res =>{
        // 如果发送成功   code = 0 就是成功
        if(res.data.code === 0){
          // 发送成功再执行下面的事件   否则弹窗 发送失败
          let time = 59;
          let timer = setInterval(() => {
            this.getYanZhengMaNumbers = time + "s后重新获取";
            time--;
            if (time === -2) {
              clearInterval(timer);
              this.getYanZhengMaNumbers = "获取验证码";
            }
          }, 1000);
        }else {
          this.$store.commit("changeInfoWindow", true);
          this.err = res.data.message;
          this.icon = "icon-toast-jinggao"
        }
      })
      
    },
    loginClick() {
      if (this.phoneNumbers === "") {
        this.$store.commit("changeInfoWindow", true);
        this.err = "请输入电话号码!!";
        this.icon = "icon-toast-jinggao"
        return;
      }
      if (!this.telephone.test(this.phoneNumbers)) {
        this.$store.commit("changeInfoWindow", true);
        this.err = "请输入正确的电话号码!!";
        this.icon = "icon-toast-jinggao"
        return;
      }
      if (this.msg !== "验证成功!") {
        this.$store.commit("changeInfoWindow", true);
        this.err = "请正确验证图片!!";
        this.icon = "icon-toast-jinggao"
        return;
      }
      if (this.myYanZhengMa === "" || this.myYanZhengMa.length !== 4) {
        this.$store.commit("changeInfoWindow", true);
        this.err = "请输入4位验证码!!";
        this.icon = "icon-toast-jinggao"
        return
      }
      // 判断我们是否存在uuid  如果存在 那么我们就去请求绑定
      let uuid = sessionStorage.getItem('uuid')
      if(uuid) {
        wechatUsersBinding({
          phone : this.phoneNumbers,
          verifyCode : this.myYanZhengMa,
          uuid : uuid,
        }).then(res=>{
          // 200就是绑定成功
          // console.log(res , '200就是绑定成功');
          // 成功就绑定完成 就都可以登录
          if(res.data.code === 0){
            // console.log('存储token');
              localStorage.setItem('token',res.data["x-auth-token"])
              let time = 2;
              this.$store.commit("changeInfoWindow", true);
              this.err = "绑定手机号成功!!3秒后跳转!";
              this.icon = "icon-toast_chenggong"
              let timer = setInterval(() => {
              this.err = "绑定手机号成功!!" + time + "秒后跳转!";
              time--;
              if (time === -1) {
                clearInterval(timer);
                // this.$router.push("/"); //跳转的目标页面
                this.$store.commit("changeInfoWindow", false);
                this.$store.commit("changeLoginIsShow", false);
                this.$store.commit("changeShoppingCartOrLogin", true);
              }
            }, 1000);
          }
        })
      }else{
        phoneRegin({
          
          verifyCode : this.myYanZhengMa,
          phone : this.phoneNumbers
          }).then((res)=>{
          if(res.data.code === 0){
            console.log('手机号登录成功');
              localStorage.setItem('token',res.data["x-auth-token"])
              let time = 2;
              this.$store.commit("changeInfoWindow", true);
              this.err = "登录成功!!3秒后跳转!";
              this.icon = "icon-toast_chenggong"
              let timer = setInterval(() => {
              this.err = "登录成功!!" + time + "秒后跳转!";
              time--;
              if (time === -1) {
                clearInterval(timer);
                this.$router.push("/"); //跳转的目标页面
                this.$store.commit("changeInfoWindow", false);
                this.$store.commit("changeLoginIsShow", false);
                this.$store.commit("changeShoppingCartOrLogin", true);
              
              }
            }, 1000);
          }
        })
      }
      
      // 如果不存在 我们就正常手机登录注册


      
  // 携带验证码去数据请求 验证码是否正确
      

    // 如果正确  执行
      
    },
  },
  components: {
    TanChuang,
  },
};
</script>
 
<style lang = "less" scoped>
@import "@/assets/base.less";
#weixin {
    width: 300px;
    margin: 0 auto;
}
.model-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* background: none; */
}
.model-box {
  border-radius: 20px 20px 1px 1px;
  width: 500px;
  height: 400px;
  background-color: white;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  img {
    position: absolute;
    right: 20px;
    top: 15px;
    cursor: pointer;
  }
  section {
    justify-content: center;
    margin-top: 40px;
    span {
      color: rgb(180, 168, 168);
      margin: 0 15px;
      cursor: pointer;
      &.active {
        color: black;
      }
    }
  }
  .phone {
    .user {
      display: flex;
      justify-content: center;
      input {
        height: 40px;
        width: 350px;
        margin: 20px auto;
        outline: none;
        text-indent: 1em;
      }
    }
    p {
      margin-top: 70px;
      margin-left: 70px;
    }
    .yanzhengma {
      margin-top: 10px;
      display: flex;
      justify-content: center;
      input {
        height: 40px;
        width: 260px;
        outline: none;
        text-indent: 1em;
        margin-right: 10px;
      }
      button {
        width: 85px;
        color: #fff;
        background-color: @blue;
        border: 1px solid @blue;
        cursor: pointer;
      }
    }
    .login {
      text-align: center;
      margin-top: 20px;
      button {
        width: 360px;
        height: 50px;
        color: #fff;
        background-color: @blue;
        cursor: pointer;
      }
    }
    

    /deep/.huakuai {
      margin: 0 auto 20px;
      position: absolute;
      top: -20px;
      left: 70px;
      canvas,
      .slide-verify-refresh-icon {
        display: none;
        position: absolute;
        top: 31px;
      }
      /* .slide-verify-slider{
                    display: block;
                } */
      .slide-verify-slider {
        /* border: 1px solid red; */
        position: absolute;
        bottom: -220px;
      }
      &:hover {
        .slide-verify-refresh-icon {
          display: block;
        }
        canvas {
          display: block;
        }
      }
    }
  }
}
</style>